嗨咿我是illumi，習慣Tailwind的你是否也曾經被 Swiper 的官方範例搞得頭昏腦脹？要寫一堆 CSS、還要手動建立每個 SwiperSlide，超級麻煩！我幫你改好啦～ 直接貼上就行！

官方範例 vs 我的改良版

官方範例：好重複

import React, { useRef, useState } from 'react';
// Import Swiper React components
import { Swiper, SwiperSlide } from 'swiper/react';

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/pagination';

import './styles.css';

// import required modules
import { Pagination } from 'swiper/modules';

export default function App() {
  return (
    <>
      <Swiper
        direction={'vertical'}
        pagination={{
          clickable: true,
        }}
        modules={[Pagination]}
        className="mySwiper"
      >
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
        <SwiperSlide>Slide 4</SwiperSlide>
        <SwiperSlide>Slide 5</SwiperSlide>
        <SwiperSlide>Slide 6</SwiperSlide>
        <SwiperSlide>Slide 7</SwiperSlide>
        <SwiperSlide>Slide 8</SwiperSlide>
        <SwiperSlide>Slide 9</SwiperSlide>
      </Swiper>
    </>
  );
}

還要引入額外的 CSS 檔案：

import 'swiper/css/pagination';
import './styles.css';  // 還要自己寫 CSS！

我的改良版本

// 資料和UI分離，用陣列管理
const slides = [
  {
    img: "",
    title: "",
  },
  // 要新增幻燈片？直接加到陣列就好！
];

// 用 map 渲染，乾淨俐落
{slides.map((slide, idx) => (
  <SwiperSlide key={idx}>
    <img src={slide.img} alt={slide.title} />
  </SwiperSlide>
))}

完整程式碼

import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import { Autoplay, Pagination } from "swiper/modules";

// 資料結構化管理
const slides = [
  {
    img: "",
    title: "",
  },
  {
    img: "",
    title: "",
  },
  {
    img: "",
    title: "",
  },
];

const WebSlider = () => {
  return (
    <div className="flex flex-col items-center justify-center font-bold bg-white/50 shadow-md backdrop-blur rounded-lg z-50 border-blue-200 border-2 overflow-hidden">

      {/* 附上用 Tailwind 做瀏覽器風格的標題列 ，可刪掉 */}
      <div className="flex gap-2 bg-gradient-to-r from-cyan-500 to-violet-200 px-4 py-2 w-full rounded-t-lg">
        <div className="rounded-full bg-white w-3 h-3"></div>
        <div className="rounded-full bg-white w-3 h-3"></div>
        <div className="rounded-full bg-white w-3 h-3"></div>
      </div>

      {/* 垂直滑動 + 自動播放 */}
      <Swiper
        direction="vertical"
        loop={true}
        autoplay={{
          delay: 2500,
          disableOnInteraction: false,
        }}
        modules={[Autoplay, Pagination]}
        grabCursor={true}
        className="aspect-video"
      >
        {/* 用 map 渲染，告別重複程式碼 */}
        {slides.map((slide, idx) => (
          <SwiperSlide key={idx}>
            <div className="flex flex-col shadow-md h-full items-center justify-center overflow-hidden">
              <img
                src={slide.img}
                alt={slide.title}
                className="h-full object-cover"
              />
            </div>
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
};

export default WebSlider;

核心改良重點

1. 資料結構化管理

const slides = [
  {
    img: "/path/to/image",
    title: "標題",
    description: "描述",
  },
];

優點：

• 要新增幻燈片？直接在陣列加一筆資料
• 要修改內容？直接改陣列資料
• 資料和UI邏輯分離

2. 純 Tailwind CSS 樣式

className="bg-white/50 shadow-md backdrop-blur rounded-lg"

優點：

• 不用寫額外的 CSS 檔案
• 所有樣式都在 JSX 裡，一目了然

3. Map 渲染自動化

{slides.map((slide, idx) => (
  <SwiperSlide key={idx}>
    {/* 內容 */}
  </SwiperSlide>
))}

優點：

• 不用手動寫每個 SwiperSlide
• 幻燈片數量自動跟著資料走
• 程式碼更簡潔、更易維護

4. 垂直滑動效果

direction="vertical"

使用方式

安裝

npm install swiper
# 或
yarn add swiper

直接複製貼上

1. 複製上面的完整程式碼
2. 把圖片路徑改成你的圖片
3. 修改 slides 陣列的內容
4. 完成！

客製化

想要水平滑動？

direction="horizontal"  // 改成 horizontal

想要更快的自動播放？

autoplay={{
  delay: 1000,  // 改成 1 秒
  disableOnInteraction: false,
}}

啟用停用自動播放

modules={[Autoplay]}

能不能滑鼠拖曳

grabCursor={true}

要不要前後loop

loop={true}

醬就完成了！我們明天見囉～